<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--   CSS定位  
         关键词：position(指定了元素的定位类型。)
         分类：
             静态定位：static（默认值）
             绝对定位：absolute
             相对定位：relative
             固定定位：flxed

-->
<!-- 静态定位 static
        不设置的时候的默认值就是static，静态定位，没有定位，
        元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
-->        
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: static;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
<!-- 绝对定位 absolute 
            absolute ,通过 top left right bottom 指定元素在页面上的固定位置
            定位后元素会让出原来位置,其他元素可以占用
 -->

 <meta charset="UTF-8">
 <style>
     .innerDiv{
             width: 100px;
             height: 100px;
     }
     .d1{
         background-color: rgb(166, 247, 46);
         position: absolute;
         left: 300px;
         top: 100px;
     }
     .d2{
         background-color: rgb(79, 230, 124);
     }
     .d3{
         background-color: rgb(26, 165, 208);
     }
        
     </style>
     <!-- 相对定位 relative
              relative 相对于自己原来的位置进行地位
              定位后保留原来的站位,其他元素不会移动到该位置
      -->
      <meta charset="UTF-8">
      <style>
          .innerDiv{
                  width: 100px;
                  height: 100px;
          }
          .d1{
              background-color: rgb(166, 247, 46);
              position: relative;
              left: 30px;
              top: 10px;
          }
          .d2{
              background-color: rgb(79, 230, 124);
          }
          .d3{
              background-color: rgb(26, 165, 208);
          }
          </style>  
          
   <!--固定定位 fixed
        fixed 是在浏览器窗口固定位置,不会随着页面的上下移动而移动
        元素定位后会让出原来的位置,其他元素可以占用   
   -->
   <meta charset="UTF-8">
   <style>
       .innerDiv{
               width: 100px;
               height: 100px;
       }
       .d1{
           background-color: rgb(166, 247, 46);
           position: fixed;
           right: 30px;
           top: 30px;
       }
       .d2{
           background-color: rgb(79, 230, 124);
       }
       .d3{
           background-color: rgb(26, 165, 208);
       }
   </style>
<body>
    <div class="innerDiv d1">框1</div>
    <div class="innerDiv d2">框2</div>
    <div class="innerDiv d3">框3</div>

</body>
</html>